<template>
	<view class="cu-bar search">
		<view class="search-form round">
			<text class="cuIcon-search"></text>
			<input type="text" class="input-wrapper relative" :placeholder="placeholder" confirm-type="search" v-model="keywords" @input="handleChange" @confirm="handleSearch" />
			<text class="cuIcon-close closeIcon" v-show="keywords" @click="handleClear"></text>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		placeholder: {
			type: String,
			default: '请输入要搜索的内容'
		}
	},
	data() {
		return {
			keywords: ''
		};
	},
	methods: {
		//点击搜索
		handleSearch() {
			this.$emit('handleSearch', this.keywords);
		},
		
		handleChange(){
			this.$emit('change', this.keywords);
		},
		
		handleClear(){
			this.keywords='';
			this.handleChange()
		}
	}
};
</script>

<style lang="scss" scoped>
.closeIcon {
	position: absolute;
	right: 20px;
	top: 9px;
	font-size: 36rpx;
	z-index: 20;
}
</style>
